﻿@{
    ViewBag.Title = "OrderAdd";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/css/home.css" rel="stylesheet" />
<script src="~/Content/js/bootstrap-tab.js"></script>
<style>
    .nav-tabs > li > a {
        padding: 8px 12px;
    }
</style>
<div class="home-content" style="margin-right:290px;">
    <div class="desk-status">
        <a href="javascript:void(0);" onclick="goBack();"><font style="font-size:14px;">返回</font></a>
    </div>
    <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
        <ul id="myTabs" class="nav nav-tabs" role="tablist">
            @if (Model.Count > 0)
            {
                int index = 0;
                foreach (var item in Model)
                {
                    if (index == 0)
                    {
                        <li role="presentation" class="active"><a href="#@item.Key" id="@item.Key" role="tab" data-toggle="tab" aria-controls="@item.Key" aria-expanded="true">@item.Key</a></li>
                    }
                    else
                    {
                        <li role="presentation"><a href="#@item.Key" id="@item.Key" role="tab" data-toggle="tab" aria-controls="@item.Key" aria-expanded="false">@item.Key</a></li>
                    }
                    index++;
                }
            }
        </ul>
        <div id="myTabContent" class="tab-content">
            @if (Model.Count > 0)
            {
                int index = 0;
                foreach (var item in Model)
                {
                    if (index == 0)
                    {
                        <div role="tabpanel" class="tab-pane fade active in" id="@item.Key" aria-labelledby="@item.Key">
                            <div class="desklist" id="desklist">
                                <ul>
                                    @foreach (var m in item.Value)
                                    {
                                        <li class="">
                                            <div class="tab-chk">
                                                <div class="icheckbox_square" id="@m.ID" style="position: relative;">
                                                    <input type="checkbox" value="@m.ID" data-t-name="" data-t-state="1号桌" style="position: absolute; opacity: 0;">
                                                    <ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
                                                </div>
                                            </div>
                                            <h3>@m.FoodName</h3>
                                            <div style="position:absolute;bottom:5px;right:10px;">
                                                <span>@m.Price 元/份</span>
                                            </div>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    }
                    else
                    {
                        <div role="tabpanel" class="tab-pane fade" id="@item.Key" aria-labelledby="@item.Key">
                            <div class="desklist" id="desklist">
                                <ul>
                                    @foreach (var m in item.Value)
                                    {
                                        <li class="">
                                            <div class="tab-chk">
                                                <div class="icheckbox_square" id="@m.ID" style="position: relative;">
                                                    <input type="checkbox" value="@m.ID" data-t-name="" data-t-state="1号桌" style="position: absolute; opacity: 0;">
                                                    <ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
                                                </div>
                                            </div>
                                            <h3>@m.FoodName</h3>
                                            <div style="position:absolute;bottom:5px;right:10px;">
                                                <span>@m.Price 元/份</span>
                                            </div>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    }
                    index++;
                }
            }
        </div>
    </div>
</div>
<div style="width:300px;position:fixed;top:0;bottom:0;right:0;border:1px solid #eee;">

</div>
<script type="text/javascript">
    $(function () {
        var arrId = [];
        $(".icheckbox_square").click(function () {
            $(this).toggleClass("checked");
            var id = $(this).attr("id")
            if ($(this).hasClass("checked")) {
                arrId.push(id);
                console.log(arrId.join());
            } else {
                for (var i = 0, len = arrId.length; i < len ; i++) {
                    if (id == arrId[i]) {
                        arrId.remove(i);
                    }
                }
                console.log(arrId.join());
            }
        });
        Array.prototype.remove = function (dx) {
            if (isNaN(dx) || dx > this.length) { return false; }
            for (var i = 0, n = 0; i < this.length; i++) {
                if (this[i] != this[dx]) {
                    this[n++] = this[i]
                }
            }
            this.length -= 1
        }
    });
</script>